<template>
	<view class="wrap bggrey">
		<view class="header-box-wrap">
			<view class="header-height"></view>
			<view class="header-box bgfff w750">
				<view class="title fcc">
					提现
				</view>
				<view @tap="goBack" class="btn-return"></view>
				<view class="right fc">
					<navigator url="/pages/index_wdskfs/index_wdskfs">
						<view>
							<span>
								添加收款方式
							</span>
						</view>
					</navigator>
				</view>
			</view>
		</view>

		<view class="padding">
			<view class="cz-box">
				<view class="inner">
					<view class="tit">
						提现金额
					</view>
					<view class="money-input" style="width:100%">
						<text class="unit">$</text>
						<input type="text" @input="z_usdt_js" @propertychange="z_usdt_jss"
							style="width:100%;font-size: 1.5rem;line-height: 1.5rem;">
					</view>

					<view style="display:none">
						<view class="money-number c_fc" style="margin-bottom: 0.2rem; display:none" id="c_usdt_dhtx">
							<text @tap="showUsdtConfirm" class="money-tips">!</text>
							提现试算：<span style="font-weight:600;color:#f40" id="c_usdt_txje">0</span> 元 预计到账：<span
								style="font-weight:600;color:#f40" id="c_usdt_dz">0</span> 个USDT
						</view>

						<view class="money-number fc" style="margin-bottom: 0.2rem;">
							<text @tap="showUsdtConfirm" class="money-tips">!</text>
							兑换汇率：<span style="font-weight:600;color:#f40">1元 ≈ 7.00 USDT</span>
						</view>
					</view>

					<view style="display:none">
						<view class="money-number c_fc" style="margin-bottom: 0.2rem;">
							<text @tap="showShouxufeiForm" class="money-tips">!</text>
							每次提现收取提现金额的 0.00%
						</view>
					</view>

					<view style="display: flex;">
						<view class="money-number fc" style="margin-bottom: 1rem;">
							<text @tap="showConfirm" class="money-tips">?</text>
							可提余额 {{getUserInfo.withdrawableBalance}} 元
						</view>
						<view class="money-number fc" style="margin-left: 10px;margin-bottom: 1rem;">
							可用余额 {{getUserInfo.availableBalance}} 元
						</view>
					</view>
				</view>
				<view class="fcc">
					<button @tap="showTimeRestriction" :style="buttonStyle" class="btn-blue fcc w100"
						:disabled="isButtonDisabled">
						<text>每日提现时间 10:00:00 - 20:00:00</text>
					</button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	export default {
		onLoad() {
			// Hide the navigation bar
			uni.setNavigationBarTitle({
				title: ' '
			});
		},
		data() {
			return {
				money: null,
				uToast: '',
				startTime: new Date().setHours(10, 0, 0, 0), // 10:00:00 in milliseconds
				endTime: new Date().setHours(20, 0, 0, 0), // 20:00:00 in milliseconds
			};
		},
		computed: {
			...mapGetters(['getUserInfo']),
			buttonStyle() {
				// Get the current time in milliseconds
				const currentTime = new Date().getTime()
				// Check if the current time is within the specified range
				const isTimeInRange = currentTime >= this.startTime && currentTime <= this.endTime;

				// Define styles based on the condition
				return {

					backgroundColor: isTimeInRange ? '' : '#7d7d7d',
					color: '#fff', // Assuming white text for better visibility
				};
			},
			isButtonDisabled() {
				// You can add logic here to disable the button based on other conditions if needed
				return false;
			},
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			showPaymentMethod() {
				// Your logic for showing payment method goes here
			},
			z_usdt_js(event) {
				console.log(event);
				this.money = event.detail.value
				// Your logic for handling z_usdt_js event goes here
			},
			z_usdt_jss(event) {
				// Your logic for handling z_usdt_jss event goes here
			},
			showUsdtConfirm() {
				// Your logic for showing Usdt Confirm goes here
			},
			showShouxufeiForm() {
				// Your logic for showing Shouxufei Form goes here
			},
			showConfirm() {
				// Your logic for showing Confirm goes here
			},
			showTimeRestriction() {

				this.$refs.uToast.show({
					type: 'loading',
					title: '',
					message: "提交中",
				})
				if (this.money === null) {
					this.$refs.uToast.show({
						type: 'error',
						icon: true,
						title: '失败主题',
						message: "请输入金额",
					})
				} else {
					const param = {
						userId: this.getUserInfo.userId,
						withdrawalAmount: this.money
					}
					this.$request.post('/system/withdrawal-record/submit-withdrawal', param)
						.then(res => {
							{
								if (res.code == 200) {
									this.$refs.uToast.show({
										type: 'success',
										title: '成功主题(带图标)',
										message: res.message,
									})
								}else{
									this.$refs.uToast.show({
										type: 'error',
										icon: true,
										title: '失败主题',
										message:res.message,
									})
								}


							}
						})
						.catch(error => {
							// 处理请求失败的情况
							console.error('GET request failed:', error);
						});
				}

			},
		},
	};
</script>

<style scoped>
	/* Add your CSS styles here */
</style>